<template>
  <UseTemplate>
    <template #sou>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @focus="onSearch"
      >
        <template #action>
          <div>搜索</div>
        </template>
      </van-search>
    </template>
    <template #nero>
      <div class="feli-1">
        <!-- 一级分类 -->
        <div class="feli-1-1">
          <van-sidebar v-model="active">
            <van-sidebar-item
              :title="item.catName"
              v-for="(item, index) in arr"
              :key="index"
            />
          </van-sidebar>
        </div>
        <!-- 二级 -->
        <div class="feli-1-2">
          <div class="fel-max">
            <div class="frl-top">
              <div class="flei-1"></div>
              <div class="ftext-1">{{ getarr[0].catName }}</div>
            </div>
            <div class="nei-ft">
              <div
                class="nei-ft-1"
                v-for="(items, index) in getarr"
                :key="index"
                @click="addurl(items)"
              >
                <img class="img-s1" :src="items.iconUrl" alt="" />
                <div class="wenz-1">{{ items.appName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UseTemplate>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getComtoken } from '@/services/user'
import { ref, computed, onMounted } from 'vue'
import { getCommon } from '@/utils/Commonmethod'
const router = useRouter()
const value = ref('')
const active = ref(0)
const arr: any = ref([
  {
    name: '学业服务',
    children: [
      {
        name: '学业服务'
      }
    ]
  }
])
//计算属性
const getarr = computed(() => {
  return arr.value[active.value].children
})
const addurl = (items: any) => {
  getCommon({
    monitorType: 'app',
    monitorId: items.id,
    monitorStatus: '1'
  })
  window.open(items.appUrl)
}

const onSearch = () => {
  router.push('/Appsearch')
}
const getlist = async () => {
  const res = await getComtoken()
  arr.value = res.list
}
onMounted(() => {
  getlist()
})
</script>

<style lang="scss" scoped>
:deep() .van-nav-bar__content {
  background: #2463fe;
  color: #fff;
}
.van-nav-bar {
  background: #2463fe;
}
:deep() .van-nav-bar__title {
  color: #fff;
}
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
.van-search {
  padding: 0;
  border-radius: 2px;
}
.feli-1 {
  width: 100%;
  height: 100%;
  display: flex;
}
.feli-1-2 {
  flex: 1;
  padding-top: 20px;
  box-sizing: border-box;
}
.fel-max {
  width: 100%;
}
.frl-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.flei-1 {
  width: 3px;
  height: 13px;
  margin-right: 14px;
  background: linear-gradient(142deg, #9ebaff 0%, #2463fe 100%);
}
.ftext-1 {
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}
.nei-ft {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.nei-ft-1 {
  width: 33%;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.img-s1 {
  width: 40px;
  height: 40px;
}
.wenz-1 {
  font-weight: 400;
  font-size: 13px;
  color: #333333;
}
</style>
